<template>
	<div>

		<div class="container">
			<el-form class='rgs-form animate__animated animate__' v-if="pageFlag=='register'" ref="registerForm" :model="registerForm" :rules="rules">
				<div class="rgs-form2">
					<div class="title">企业电能监测与能效管理系统注册</p></div>
					<el-form-item class="list-item" v-if="tableName=='jianceyuan'" prop="gonghao">
						<div class="label" :class="changeRules('gonghao')?'required':''">工号：</div>
						<el-input v-model="registerForm.gonghao"  placeholder="请输入工号" />
					</el-form-item>
					<el-form-item class="list-item" v-if="tableName=='jianceyuan'" prop="mima">
						<div class="label" :class="changeRules('mima')?'required':''">密码：</div>
						<el-input v-model="registerForm.mima" type="password" placeholder="请输入密码" />
					</el-form-item>
					<el-form-item class="list-item" v-if="tableName=='jianceyuan'" prop="mima2">
						<div class="label" :class="changeRules('mima')?'required':''">确认密码：</div>
						<el-input v-model="registerForm.mima2" type="password" placeholder="请再次输入密码" />
					</el-form-item>
					<el-form-item class="list-item" v-if="tableName=='jianceyuan'" prop="xingming">
						<div class="label" :class="changeRules('xingming')?'required':''">姓名：</div>
						<el-input v-model="registerForm.xingming"  placeholder="请输入姓名" />
					</el-form-item>
					<el-form-item class="list-item" v-if="tableName=='jianceyuan'" prop="xingbie">
						<div class="label" :class="changeRules('xingbie')?'required':''">性别：</div>
						<el-select v-model="registerForm.xingbie" placeholder="请选择性别" >
							<el-option
								v-for="(item,index) in jianceyuanxingbieOptions"
								:key="index"
								:label="item"
								:value="item">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item class="list-item" v-if="tableName=='jianceyuan'" prop="bumen">
						<div class="label" :class="changeRules('bumen')?'required':''">部门：</div>
						<el-select v-model="registerForm.bumen" placeholder="请选择部门" >
							<el-option
								v-for="(item,index) in jianceyuanbumenOptions"
								:key="index"
								:label="item"
								:value="item">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item class="list-item" v-if="tableName=='jianceyuan'" prop="gangwei">
						<div class="label" :class="changeRules('gangwei')?'required':''">岗位：</div>
						<el-select v-model="registerForm.gangwei" placeholder="请选择岗位" >
							<el-option
								v-for="(item,index) in jianceyuangangweiOptions"
								:key="index"
								:label="item"
								:value="item">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item class="list-item" v-if="tableName=='jianceyuan'" prop="touxiang">
						<div class="label" :class="changeRules('touxiang')?'required':''">头像：</div>
						<file-upload
							tip="点击上传头像"
							action="file/upload"
							:limit="1"
							:multiple="true"
							:fileUrls="registerForm.touxiang?registerForm.touxiang:''"
							@change="jianceyuantouxiangUploadChange"
						></file-upload>
					</el-form-item>
					<el-form-item v-if="tableName=='jianceyuan'" class="el-email list-item">
						<div class="label required">手机号：</div>
						<div style="display: flex;flex: 1;">
							<input v-model="registerForm.mobile" type="text" id="mobile" name="mobile" placeholder="请输入手机号" autocomplete="off" class="emailInput">
							<button v-if="isEndFlag" @click="sendsmscode" id="sendsmscode" type="button" class="el-btn">发送验证码</button>
							<button v-if="!isEndFlag" disabled="disabled" type="button" class="el-btn">{{count}}秒后重发</button>
						</div>
					</el-form-item>
					<el-form-item v-if="tableName=='jianceyuan'" class="el-email list-item">
						<div class="label required">验证码：</div>
						<el-input v-model="smscode" type="text" id="smscode" name="smscode" placeholder="请输入验证码" autocomplete="off" class="el-input" />
					</el-form-item>
					<el-form-item class="list-item" v-if="tableName=='jishurenyuan'" prop="jishuzhanghao">
						<div class="label" :class="changeRules('jishuzhanghao')?'required':''">技术账号：</div>
						<el-input v-model="registerForm.jishuzhanghao"  placeholder="请输入技术账号" />
					</el-form-item>
					<el-form-item class="list-item" v-if="tableName=='jishurenyuan'" prop="mima">
						<div class="label" :class="changeRules('mima')?'required':''">密码：</div>
						<el-input v-model="registerForm.mima" type="password" placeholder="请输入密码" />
					</el-form-item>
					<el-form-item class="list-item" v-if="tableName=='jishurenyuan'" prop="mima2">
						<div class="label" :class="changeRules('mima')?'required':''">确认密码：</div>
						<el-input v-model="registerForm.mima2" type="password" placeholder="请再次输入密码" />
					</el-form-item>
					<el-form-item class="list-item" v-if="tableName=='jishurenyuan'" prop="jishuxingming">
						<div class="label" :class="changeRules('jishuxingming')?'required':''">技术姓名：</div>
						<el-input v-model="registerForm.jishuxingming"  placeholder="请输入技术姓名" />
					</el-form-item>
					<el-form-item class="list-item" v-if="tableName=='jishurenyuan'" prop="xingbie">
						<div class="label" :class="changeRules('xingbie')?'required':''">性别：</div>
						<el-select v-model="registerForm.xingbie" placeholder="请选择性别" >
							<el-option
								v-for="(item,index) in jishurenyuanxingbieOptions"
								:key="index"
								:label="item"
								:value="item">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item class="list-item" v-if="tableName=='jishurenyuan'" prop="bumen">
						<div class="label" :class="changeRules('bumen')?'required':''">部门：</div>
						<el-select v-model="registerForm.bumen" placeholder="请选择部门" >
							<el-option
								v-for="(item,index) in jishurenyuanbumenOptions"
								:key="index"
								:label="item"
								:value="item">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item class="list-item" v-if="tableName=='jishurenyuan'" prop="gangwei">
						<div class="label" :class="changeRules('gangwei')?'required':''">岗位：</div>
						<el-select v-model="registerForm.gangwei" placeholder="请选择岗位" >
							<el-option
								v-for="(item,index) in jishurenyuangangweiOptions"
								:key="index"
								:label="item"
								:value="item">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item class="list-item" v-if="tableName=='jishurenyuan'" prop="touxiang">
						<div class="label" :class="changeRules('touxiang')?'required':''">头像：</div>
						<file-upload
							tip="点击上传头像"
							action="file/upload"
							:limit="1"
							:multiple="true"
							:fileUrls="registerForm.touxiang?registerForm.touxiang:''"
							@change="jishurenyuantouxiangUploadChange"
						></file-upload>
					</el-form-item>
					<el-form-item v-if="tableName=='jishurenyuan'" class="el-email list-item">
						<div class="label required">手机号：</div>
						<div style="display: flex;flex: 1;">
							<input v-model="registerForm.mobile" type="text" id="mobile" name="mobile" placeholder="请输入手机号" autocomplete="off" class="emailInput">
							<button v-if="isEndFlag" @click="sendsmscode" id="sendsmscode" type="button" class="el-btn">发送验证码</button>
							<button v-if="!isEndFlag" disabled="disabled" type="button" class="el-btn">{{count}}秒后重发</button>
						</div>
					</el-form-item>
					<el-form-item v-if="tableName=='jishurenyuan'" class="el-email list-item">
						<div class="label required">验证码：</div>
						<el-input v-model="smscode" type="text" id="smscode" name="smscode" placeholder="请输入验证码" autocomplete="off" class="el-input" />
					</el-form-item>
					<div class="register-btn">
						<div class="register-btn1">
							<el-button class="register_btn" type="primary" @click="submitForm('registerForm')">注册</el-button>
						</div>
						<div class="register-btn2">
							<router-link class="has_btn" to="/login">已有账号，直接登录</router-link>
						</div>
					</div>
				</div>
				<div class="idea1"></div>
				<div class="idea2"></div>
			</el-form>
		</div>
	</div>
</div>
</template>

<script>
	import 'animate.css';

export default {
    //数据集合
    data() {
		return {
            pageFlag : '',
			tableName: '',
			registerForm: {},
			forgetForm: {},
			rules: {},
			requiredRules: {},
            jianceyuanxingbieOptions: [],
            jianceyuanbumenOptions: [],
            jianceyuangangweiOptions: [],
            jishurenyuanxingbieOptions: [],
            jishurenyuanbumenOptions: [],
            jishurenyuangangweiOptions: [],
            smscode:'',
			//倒计时60s
			count: 60,
			//倒计时定时器
			inter: null,
			//倒计结束标识
			isEndFlag: true,
		}
    },
	mounted() {
		if(this.$route.query.pageFlag=='register'){
			this.tableName = this.$route.query.role;
			if(this.tableName=='jianceyuan'){
				this.registerForm = {
					gonghao: '',
					mima: '',
					mima2: '',
					xingming: '',
					xingbie: '',
					bumen: '',
					gangwei: '',
					touxiang: '',
					sfsh: '',
					shhf: '',
					mobile: '',
				}
			}
			if(this.tableName=='jishurenyuan'){
				this.registerForm = {
					jishuzhanghao: '',
					mima: '',
					mima2: '',
					jishuxingming: '',
					xingbie: '',
					bumen: '',
					gangwei: '',
					touxiang: '',
					jianjie: '',
					sfsh: '',
					shhf: '',
					mobile: '',
				}
			}
			if ('jianceyuan' == this.tableName) {
				this.rules.gonghao = [{ required: true, message: '请输入工号', trigger: 'blur' }];
				this.requiredRules.gonghao = [{ required: true, message: '请输入工号', trigger: 'blur' }]
			}
			if ('jianceyuan' == this.tableName) {
				this.rules.mima = [{ required: true, message: '请输入密码', trigger: 'blur' }];
				this.requiredRules.mima = [{ required: true, message: '请输入密码', trigger: 'blur' }]
			}
			if ('jianceyuan' == this.tableName) {
				this.rules.xingming = [{ required: true, message: '请输入姓名', trigger: 'blur' }];
				this.requiredRules.xingming = [{ required: true, message: '请输入姓名', trigger: 'blur' }]
			}
			this.jianceyuanxingbieOptions = "男,女".split(',');
			this.$http({
				url: `option/bumen/bumen`,
				method: "get",
				params: {}
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.jianceyuanbumenOptions = data.data;
				}
			});
			this.$http({
				url: `option/gangwei/gangwei`,
				method: "get",
				params: {}
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.jianceyuangangweiOptions = data.data;
				}
			});
			if ('jianceyuan' == this.tableName) {
				this.rules.mobile = [{ required: true, validator: this.$validate.isMobile, trigger: 'blur' }];
			}
			if ('jishurenyuan' == this.tableName) {
				this.rules.jishuzhanghao = [{ required: true, message: '请输入技术账号', trigger: 'blur' }];
				this.requiredRules.jishuzhanghao = [{ required: true, message: '请输入技术账号', trigger: 'blur' }]
			}
			if ('jishurenyuan' == this.tableName) {
				this.rules.mima = [{ required: true, message: '请输入密码', trigger: 'blur' }];
				this.requiredRules.mima = [{ required: true, message: '请输入密码', trigger: 'blur' }]
			}
			if ('jishurenyuan' == this.tableName) {
				this.rules.jishuxingming = [{ required: true, message: '请输入技术姓名', trigger: 'blur' }];
				this.requiredRules.jishuxingming = [{ required: true, message: '请输入技术姓名', trigger: 'blur' }]
			}
			this.jishurenyuanxingbieOptions = "男,女".split(',');
			this.$http({
				url: `option/bumen/bumen`,
				method: "get",
				params: {}
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.jishurenyuanbumenOptions = data.data;
				}
			});
			this.$http({
				url: `option/gangwei/gangwei`,
				method: "get",
				params: {}
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.jishurenyuangangweiOptions = data.data;
				}
			});
			if ('jishurenyuan' == this.tableName) {
				this.rules.mobile = [{ required: true, validator: this.$validate.isMobile, trigger: 'blur' }];
			}
		}
	},
    created() {
		this.pageFlag = this.$route.query.pageFlag;
    },
    //方法集合
    methods: {
		changeRules(name){
			if(this.requiredRules[name]){
				return true
			}
			return false
		},
		// 获取uuid
		getUUID () {
			return new Date().getTime();
		},
        // 下二随
		jianceyuantouxiangUploadChange(fileUrls) {
			this.registerForm.touxiang = fileUrls.replace(new RegExp(this.$config.baseUrl,"g"),"");
		},
		jishurenyuantouxiangUploadChange(fileUrls) {
			this.registerForm.touxiang = fileUrls.replace(new RegExp(this.$config.baseUrl,"g"),"");
		},

		// 多级联动参数

		sendsmscode() {
			if(!this.registerForm.mobile){
				this.$message.error(`手机号码不能为空`);
				return
			}
			let mobileF = this.$validate.isMobile2(this.registerForm.mobile);
			if(this.registerForm.mobile&&(!this.$validate.isMobile2(this.registerForm.mobile))){
				this.$message.error(`请输入正确的手机格式`);
				return
			}
			this.isEndFlag = false;
			var _this = this;
			this.inter = window.setInterval(function() {
				_this.count = _this.count - 1;
				if (_this.count <= 0) {
					window.clearInterval(_this.inter);
					_this.isEndFlag = true;
					_this.count=60;
				}
			}, 1000);
			this.$http({
				url: `${this.tableName}/sendsms?mobile=`+this.registerForm.mobile,
				method: "get",
				params: {}
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.$message.success(`发送成功`);
				} else {
					this.$message.error(`服务器异常，请稍后重试`)
				}
			});
		},

		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					var url=this.tableName+"/register";
					if(this.tableName=='jianceyuan'){
						this.registerForm.sfsh = '待审核'
					}
					if(`jianceyuan` == this.tableName ){
						url=this.tableName+"/register?smscode="+this.smscode;
						if(this.registerForm.mobile&&(!this.$validate.isMobile2(this.registerForm.mobile))){
							this.$message.error(`请输入正确的手机格式`);
							return
						}
					}
					if((!this.smscode) && `jianceyuan` == this.tableName){
						this.$message.error(`验证码不能为空`);
						return
					}
					if(`jianceyuan` == this.tableName && this.registerForm.mima!=this.registerForm.mima2) {
						this.$message.error(`两次密码输入不一致`);
						return
					}
					if(this.tableName=='jishurenyuan'){
						this.registerForm.sfsh = '待审核'
					}
					if(`jishurenyuan` == this.tableName ){
						url=this.tableName+"/register?smscode="+this.smscode;
						if(this.registerForm.mobile&&(!this.$validate.isMobile2(this.registerForm.mobile))){
							this.$message.error(`请输入正确的手机格式`);
							return
						}
					}
					if((!this.smscode) && `jishurenyuan` == this.tableName){
						this.$message.error(`验证码不能为空`);
						return
					}
					if(`jishurenyuan` == this.tableName && this.registerForm.mima!=this.registerForm.mima2) {
						this.$message.error(`两次密码输入不一致`);
						return
					}
					this.$http.post(url, this.registerForm).then(res => {
						if (res.data.code === 0) {
							this.$message({
								message: '注册成功',
								type: 'success',
								duration: 1500,
								onClose: () => {
									this.$router.push('/login');
								}
							});
						} else {
							this.$message.error(res.data.msg);
						}
					});
				} else {
					return false;
				}
			});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		}
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.container {
		background: url(http://codegen.caihongy.cn/20250121/5efb30f4401d4206a74236835582087a.png) center center/100% 100%;
		display: flex;
		width: 100%;
		min-height: 100vh;
		justify-content: flex-end;
		align-items: center;
		position: relative;
		position: relative;
		background: url(http://codegen.caihongy.cn/20250121/5efb30f4401d4206a74236835582087a.png) center center/100% 100%;
		.rgs-form {
			border-radius: 0;
			padding: 0;
			box-shadow: 0px 4px 4px 0px rgb(204, 160, 95);
			max-height: 80vh;
			margin: 0 10% 0 0;
			z-index: 3;
			overflow: auto;
			background: #fff;
			width: 30%;
			position: relative;
			height: auto;
			.rgs-form2 {
				padding: 80px 40px;
				background: #fff;
				width: 100%;
				.title {
					padding: 0 0 0 10%;
					margin: -160px 0 0;
					z-index: -1;
					color: #fff;
					font-size: 30px;
					line-height: 300px;
					top: 50%;
					left: 0;
					background: #a4b3f6;
					width: 100%;
					position: fixed;
					text-align: left;
					height: 320px;
				}
				.subtitle {
					margin: 0 0 10px 0;
					text-shadow: 4px 4px 2px rgba(64, 158, 255, .5);
					color: rgba(64, 158, 255, 1);
					width: 100%;
					font-size: 20px;
					line-height: 44px;
					text-align: center;
				}
				.list-item {
					padding: 0;
					margin: 0 auto 10px;
					width: 80%;
					height: auto;
					/deep/.el-form-item__content {
						display: flex;
						align-items: flex-start;
						flex-wrap: wrap;
						.label {
							padding: 0 0 0 10px;
							color: #a4b3f6;
							width: 100%;
							font-size: 14px;
							line-height: 30px;
						}
						
						.required {
							position: relative;
						}
						.required::after{
							color: red;
							left: -10px;
							position: absolute;
							content: "*";
						}
						.el-input {
							width: 100%;
						}
						.el-input .el-input__inner {
							border: 0px solid rgba(64, 158, 255, 1);
							border-radius: 0;
							padding: 0 10px;
							box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25),0px -2px 4px 0px rgba(0, 0, 0, 0.25);
							color: #a4b3f6;
							width: 100%;
							font-size: 14px;
							height: 44px;
						}
						.el-input .el-input__inner:focus {
							border: 0px solid rgba(64, 158, 255, 1);
							border-radius: 0;
							padding: 0 10px;
							box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25),0px -2px 4px 0px rgba(0, 0, 0, 0.25);
							color: #a4b3f6;
							width: 100%;
							font-size: 14px;
							height: 44px;
						}
						.el-input-number {
							width: 100%;
						}
						.el-input-number .el-input__inner {
							text-align: left;
							border: 0px solid rgba(64, 158, 255, 1);
							border-radius: 0;
							padding: 0 10px;
							box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25),0px -2px 4px 0px rgba(0, 0, 0, 0.25);
							color: #a4b3f6;
							width: 100%;
							font-size: 14px;
							height: 44px;
						}
						.el-input-number .el-input-number__decrease {
							display: none;
						}
						.el-input-number .el-input-number__increase {
							display: none;
						}
						.el-select {
							width: 100%;
						}
						.el-select .el-input__inner {
							border: 0;
							border-radius: 0;
							padding: 0 10px;
							box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25),0px -2px 4px 0px rgba(0, 0, 0, 0.25);
							outline: none;
							color: #a4b3f6;
							width: 100%;
							font-size: 14px;
							height: 44px;
						}
						.el-select .el-input__inner:focus {
							border: 0;
							border-radius: 0;
							padding: 0 10px;
							box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25),0px -2px 4px 0px rgba(0, 0, 0, 0.25);
							outline: none;
							color: #a4b3f6;
							width: 100%;
							font-size: 14px;
							height: 44px;
						}
						.el-date-editor {
							width: 100%;
						}
						.el-date-editor .el-input__inner {
							border: 0;
							border-radius: 0;
							padding: 0 10px 0 30px;
							box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25),0px -2px 4px 0px rgba(0, 0, 0, 0.25);
							outline: none;
							color: #a4b3f6;
							width: 100%;
							font-size: 14px;
							height: 44px;
						}
						.el-date-editor .el-input__inner:focus {
							border: 0;
							border-radius: 0;
							padding: 0 10px 0 30px;
							box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25),0px -2px 4px 0px rgba(0, 0, 0, 0.25);
							outline: none;
							color: #a4b3f6;
							width: 100%;
							font-size: 14px;
							height: 44px;
						}
						.el-upload--picture-card {
							background: transparent;
							border: 0;
							border-radius: 0;
							width: auto;
							height: auto;
							line-height: initial;
							vertical-align: middle;
						}
						.upload .upload-img {
							border: 1px dashed #a4b3f6;
							cursor: pointer;
							border-radius: 8px;
							color: #a4b3f6;
							width: 80px;
							font-size: 32px;
							line-height: 80px;
							text-align: center;
							height: 80px;
						}
						.el-upload-list .el-upload-list__item {
							border: 1px dashed #a4b3f6;
							cursor: pointer;
							border-radius: 8px;
							color: #a4b3f6;
							width: 80px;
							font-size: 32px;
							line-height: 80px;
							text-align: center;
							height: 80px;
							font-size: 14px;
							line-height: 1.8;
						}
						.el-upload .el-icon-plus {
							border: 1px dashed #a4b3f6;
							cursor: pointer;
							border-radius: 8px;
							color: #a4b3f6;
							width: 80px;
							font-size: 32px;
							line-height: 80px;
							text-align: center;
							height: 80px;
						}
						.el-upload__tip {
							color: #a4b3f6;
						}
						.emailInput {
							border: 0px solid rgba(64, 158, 255, 1);
							border-radius: 0;
							padding: 0 10px;
							box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25),0px -2px 4px 0px rgba(0, 0, 0, 0.25);
							color: #a4b3f6;
							width: 100%;
							font-size: 14px;
							height: 44px;
						}
						.emailInput:focus {
							border: 0px solid rgba(64, 158, 255, 1);
							border-radius: 0;
							padding: 0 10px;
							box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25),0px -2px 4px 0px rgba(0, 0, 0, 0.25);
							color: #a4b3f6;
							width: 100%;
							font-size: 14px;
							height: 44px;
						}
						.el-btn {
							border: 0;
							cursor: pointer;
							border-radius: 0;
							padding: 0;
							box-shadow: 0 0 0px rgba(64, 158, 255, .5);
							margin: 0;
							outline: none;
							color: #fff;
							background: #6c84ed;
							width: 80px;
							font-size: 12px;
							height: 44px;
						}
						.el-btn:hover {
							opacity: 0.5;
						}
						
						.el-input__inner::placeholder {
							color: #a1a0a0;
							font-size: 14px;
						}
						input::placeholder {
							color: #a1a0a0;
							font-size: 14px;
						}
						.editor {
							width: 100%;
							height: auto;
						}
					}
				}
				.register-btn {
					width: 100%;
				}
				.register-btn1 {
					width: 100%;
				}
				.register-btn2 {
					width: 100%;
				}
				.register_btn {
					border: 0;
					cursor: pointer;
					padding: 0 10px;
					margin: 20px auto 5px;
					color: #fff;
					display: block;
					font-size: 18px;
					border-radius: 0;
					box-shadow: 0 0 0px rgba(64, 158, 255, .5);
					outline: none;
					background: #6c84ed;
					width: 80%;
					height: 50px;
				}
				.register_btn:hover {
					opacity: 0.5;
				}
				.has_btn {
					cursor: pointer;
					padding: 0 10%;
					color: #a4b3f6;
					display: inline-block;
					text-decoration: none;
					font-size: 12px;
					line-height: 1;
				}
				.has_btn:hover {
					opacity: 0.5;
				}
			}
			.idea1 {
				background: red;
				display: none;
				width: 100%;
				height: 40px;
			}
			.idea2 {
				background: blue;
				display: none;
				width: 100%;
				height: 40px;
			}
		}
	}
	
	::-webkit-scrollbar {
		display: none;
	}
</style>
